<template>
  <div class="about">
    <div class="one1">
      <p>爆爆团</p>
      <p style="font-size:30px">限时抢购 超级低价</p>
    </div>
    <div class="contcent">
      <div class="top1">
        <div @click="gets(index)" v-for="(item,index) in text" :key="index" :class="{active:currentIndex==index}">
          {{ item.name }}</div>
      </div>
      <div class="footer">
        <div class="item" v-for="(item, index) in (currentIndex == 0 ? list : lists)" :key="index">
          <div class="banner">
            <img :src="item.picture" alt="">
          </div>
          <div class="cont">
            <div class="name">{{ item.name }}</div>
            <span>￥{{ item.min_price }}</span>
            <span>{{ item.promotion_info }}</span>
            <button @click="getc(item)">{{ item.status == 0 ? '马上抢' : '已抢到' }}</button>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>


<script setup>
import { ref, onMounted } from 'vue';
import { tuan_list } from "../../api/api";
var currentIndex = ref(0)
var text=ref([{name:'正在抢购'},{name:'上新预告'}])
var list = ref([])
var lists = ref([])
 var gets=(index)=>{
   console.log(index);
    currentIndex.value=index
 }
 var getc=(item)=>{
  item.status++
 }

onMounted(() => {
  tuan_list({ params: { status: 0 } }).then((res) => {
    list.value = res.data.list
    console.log(res.data.list);
  })
  tuan_list({ params: { status: 1 } }).then((res) => {
    res.data.list.map((res)=>{
           res.status=0
           
        })
    lists.value = res.data.list
    console.log(res.data.list);
  })
})
</script>

<style scoped>


.one1 {
  height: 150px;
  text-align: center;
  line-height: 50px;
  /* color: white; */
}

.top1 {
  width: 200px;
  display: flex;
  justify-content: space-around;
  font-size: 18px;
}

.active {
  color: #2be5cd;
}

.item .banner {
  width: 100px;
  height: 100px;

}

.item .banner img {
  width: 90%;
  height: 90%;
}

.item {
  width: 80%;
  height: 100px;
  margin: auto;
  display: flex;
  justify-content: space-around;
  background-color: white;
  margin-bottom: 20px;
  border-radius: 10px;
  padding: 10px;

}

.cont {
  width: 200px;
  height: 100px;
  line-height: 30px;
}

.footer {
  margin-top: 30px;
  height: 410px;
  overflow: auto;

}

button {
  width: 65px;
  height: 30px;
  border-radius: 30px;
  margin-left: 10px;
  background-color: orangered;
  color: white;
}
</style>
